$('.logo1-2 > span:first').mouseenter(function () {
    $('.logo2-1').css('display', 'block')
})
for (let i = 0; i < $('.logo2-1 li').length; i++) {
    $('.logo2-1 li').eq(i).mouseenter(function () {
        $('.logo2-1').css('display', 'block')
        $('.logo2').css('display', 'block')
        $('.logo2 ul').eq(i).css('display', 'block')
        $('.logo2 ul').eq(i).css('display', 'flex')

        $('.logo2 ul').eq(i).siblings().css('display', 'none')
    })
}
// 鼠标离开 列表消失
$('.logo2').mouseleave(function () {
    $('.logo2-1').css('display', 'none')
    $('.logo2').css('display', 'none')
})


let peijian1 = peijian.resultList

let peijian3 = peijian2.resultList

let shouji1 = shouji.resultList

let baohu1 = baohu.resultList

let zipai1 = zipai.resultList

let dianyuan1 = dianyuan.resultList
console.log(peijian1);
let list1 = list.resultList.slice(0, 20)
// console.log(list1);
let list2 = list.resultList.slice(20, 40)
// console.log(list2);
let list3 = list.resultList.slice(40, 60)
// console.log(list3);
let list4 = list.resultList.slice(60, 78)
// console.log(list4);
//定义一个字符串
let str = ``
//拿到数据
// let list1 = list.resultList.slice(0, 75)
// console.log(list1);


auto(list2)
function auto(arr) {
    let listBox1_1 = document.querySelector('.listBox1-1')
    //定义一个字符串
    let str = ``
    //拿到数据
    let list1 = list.resultList.slice(0, 20)
    // console.log(list1);
    let list2 = list.resultList.slice(20, 40)
    // console.log(list2);
    let list3 = list.resultList.slice(40, 60)
    // console.log(list3);
    let list4 = list.resultList.slice(60, 78)
    // console.log(list4);

    arr.forEach(function (item) {
       
        // 渲染页面
        str += `
    <a href="#">
        <li data-productId="${item.productId}">
            <p>
                <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
            </p>
            <p>${item.briefName}</p>
            <p>
                <span>￥${item.priceAccurate}</span>
                <span>多款可选</span>
            </p>
            <p>
                <span>${item.promoLabels}</span>
            </p>
            <p>
                <span>8305人评价</span>
                <span>97%好评</span>
            </p>
        </li>
    </a>
   
`
listBox1_1.innerHTML = str
    })
    
}


$('.page p').eq(0).on('click', function () {
    auto(list2)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        //拿到数据
        console.log(list.resultList);
        let list1 = list.resultList.slice(0, 20)
        console.log(list1);
        let list2 = list.resultList.slice(20, 40)
        console.log(list2);
        let list3 = list.resultList.slice(40, 60)
        console.log(list3);
        let list4 = list.resultList.slice(60, 78)
        console.log(list4);

        arr.forEach(function (item) {

            // 渲染页面
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
        
    `
    
    listBox1_1.innerHTML = str
            
        })

    }
})


$('.page p').eq(1).on('click', function () {
    console.log(111);
    auto(list1)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        //拿到数据
        let list1 = list.resultList.slice(0, 20)
        // console.log(list1);
        arr.forEach(function (item) {

            // 渲染页面
            str += `
        <a href="#">
            <li data-productId="${item.productId}">-
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })

    }
})

$('.page p').eq(2).on('click', function () {
    console.log(111);
    auto(list3)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        //拿到数据

        let list2 = list.resultList.slice(20, 40)
        console.log(list2);


        arr.forEach(function (item) {

            // 渲染页面
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })

    }
})

$('.page p').eq(3).on('click', function () {
    console.log(111);
    auto(list4)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        //拿到数据
        let list1 = list.resultList.slice(0, 20)
        console.log(list1);
        let list2 = list.resultList.slice(20, 40)
        console.log(list2);
        let list3 = list.resultList.slice(40, 60)
        console.log(list3);
        let list4 = list.resultList.slice(60, 78)
        console.log(list4);

        arr.forEach(function (item) {

            // 渲染页面
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })

    }
})


$('.list1-2-1 li').eq(1).on('click', function () {
    console.log(111);
    auto(peijian1)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        //拿到数据
        let list1 = list.resultList.slice(0, 20)
        console.log(list1);
        let list2 = list.resultList.slice(20, 40)
        console.log(list2);
        let list3 = list.resultList.slice(40, 60)
        console.log(list3);
        let list4 = list.resultList.slice(60, 78)
        console.log(list4);

        arr.forEach(function (item) {

            // 渲染页面
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })

    }
})
$('.list1-2-1 li').eq(2).on('click', function () {
    auto(peijian1)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        arr.forEach(function (item) {
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })
    }
})

$('.list1-2-1 li').eq(3).on('click', function () {
    auto(shouji1)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        arr.forEach(function (item) {
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })
    }
})

$('.list1-2-1 li').eq(4).on('click', function () {
    auto(baohu1)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        arr.forEach(function (item) {
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })
    }
})

$('.list1-2-1 li').eq(5).on('click', function () {
    auto(peijian1)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        arr.forEach(function (item) {
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })
    }
})
$('.list1-2-1 li').eq(6).on('click', function () {
    auto(dianyuan1)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        arr.forEach(function (item) {
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })
    }
})

$('.list1-2-1 li').eq(7).on('click', function () {
    auto(zipai1)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        arr.forEach(function (item) {
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })
    }
})

$('.list1-2-1 li').eq(8).on('click', function () {
    auto(peijian3)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        arr.forEach(function (item) {
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })
    }
})

let li5 = document.querySelector('.li5')

$('.list1-3 .li5').on('click', function () {
    auto(peijian1)
    function auto(arr) {
        let listBox1_1 = document.querySelector('.listBox1-1')
        //定义一个字符串
        let str = ``
        arr.forEach(function (item) {
            str += `
        <a href="#">
            <li data-productId="${item.productId}">
                <p>
                    <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                </p>
                <p>${item.briefName}</p>
                <p>
                    <span>￥${item.priceAccurate}</span>
                    <span>多款可选</span>
                </p>
                <p>
                    <span>${item.promoLabels}</span>
                </p>
                <p>
                    <span>8305人评价</span>
                    <span>97%好评</span>
                </p>
            </li>
        </a>
       
    `
            listBox1_1.innerHTML = str
        })
    }
})


li5.onclick = function () {
    console.log(55);
    li5.classList.toggle('active')

    $('.active').on('click', function () {
        auto(shouji1)
        function auto(arr) {
            let listBox1_1 = document.querySelector('.listBox1-1')
            //定义一个字符串
            let str = ``
            arr.forEach(function (item) {
                str += `
            <a href="#">
                <li data-productId="${item.productId}">
                    <p>
                        <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}">
                    </p>
                    <p>${item.briefName}</p>
                    <p>
                        <span>￥${item.priceAccurate}</span>
                        <span>多款可选</span>
                    </p>
                    <p>
                        <span>${item.promoLabels}</span>
                    </p>
                    <p>
                        <span>8305人评价</span>
                        <span>97%好评</span>
                    </p>
                </li>
            </a>
           
        `
                listBox1_1.innerHTML = str
            })
        }
    })



}

let head1_2_3 = document.querySelector('.top1-2-3')  //退出登录

head1_2_3.onclick = function(){

    window.sessionStorage.removeItem('username')
    window.sessionStorage.removeItem('rpassword')
    window.sessionStorage.removeItem('password')
    window.sessionStorage.removeItem('free')
    window.location.reload()
}




//搜索引擎
let input1 = document.querySelector('.logo1-3>input')
let ul1 = document.querySelector('.logo1-3-1')
//给inp增加input事件
input1.addEventListener('input', () => {
    // let text1 = ul1.value
    let aa = input1.value
    //添加script标签
    let script = document.createElement('script')
    script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&wd=${aa}&req=2&csor=4&pwd=sun&cb=res&_=1646366030169`
    // document.body.appendChlid(script)
    document.body.appendChild(script)
    script.remove()
})

function res(res1) {
    console.log(res1);
    if (!res1.g) return ul1.style.display = 'none'
    console.log(res1);
    let str = ''
    //遍历数组数据
    res1.g.forEach(item => {
        str += `
       <li data-productId="${item.productId}">${item.q}</li>
       `
    })
    ul1.innerHTML = str
    ul1.style.display = 'block'
}





//回到顶部显示，回到顶部效果
window.onscroll = function () {

    let top = document.documentElement.scrollTop || document.body.scrollTop

    if (top > 500) {

        $('.right ul li:nth-child(4)').css('display', 'block')
    } else {
        $('.right ul li:nth-child(4)').css('display', 'none')
    }
}

$('.right ul li:nth-child(4)').on('click', function () {

    window.scrollTo({
        left: 0,
        top: 0,
        behavior: 'smooth'

    })
})

console.log(list);

//手机号登录
let username2 = window.sessionStorage.getItem('username1')
//账号登录
let username1 = window.sessionStorage.getItem('username')

let denglu = document.querySelector('.top1-2 span:nth-of-type(1)')

denglu.innerHTML = username1 || username2

let zhuce = denglu.querySelector('.top1-2 span:nth-of-type(2)')



let arr = []
let arr1 = []
let arr2 = []
let arr3 = []
let arr4 = []
let arr5 = []
list.resultList.forEach(function (item) {

    arr.push(item.productId)  //id
    arr1.push(item.skuName)   //商品名
    arr2.push(item.promoLabels)  //积分
    arr3.push(item.photoName)   //图片1
    arr4.push(item.photoPath)   //图片2
    arr5.push(item.priceAccurate)   //价格
})


let obj = {...arr}

let lis = [];
for (var key in obj) {
    var temp = {}
    temp.name = key;
    temp.id = obj[key];
    lis.push(temp)
}

let obj1 = {...arr1}

let lis1 = [];
for (var key1 in obj1) {
    var temp1 = {}
    temp1.name1 = key1;
    temp1.skuName1 = obj1[key1];
    lis1.push(temp1)
}

let obj2 = {...arr2}

let lis2 = [];
for (var key2 in obj2) {
    var temp2 = {}
    temp2.name2 = key2;
    temp2.promoLabels = obj2[key2];
    lis2.push(temp2)
}



let obj3 = {...arr3}

let lis3 = [];
for (var key3 in obj3) {
    var temp3 = {}
    temp3.name3 = key3;
    temp3.photoName = obj3[key3];
    lis3.push(temp3)
}


let obj4 = {...arr4}

let lis4 = [];
for (var key4 in obj4) {
    var temp4 = {}
    temp4.name4 = key4;
    temp4.photoPath = obj4[key4];
    lis4.push(temp4)
}

let obj5 = {...arr5}

let lis5 = [];
for (var key5 in obj5) {
    var temp5 = {}
    temp5.name5 = key5;
    temp5.priceAccurate = obj5[key5];
    lis5.push(temp5)
}


// 数组拼接
for(let i = 0;i < lis.length;i++){

    lis[i].skuName = lis1[i].skuName1

    lis[i].promoLabels =lis2[i].promoLabels

    lis[i].photoName =lis3[i].photoName

    lis[i].photoPath =lis4[i].photoPath

    lis[i].priceAccurate =lis5[i].priceAccurate
}






console.log(list.resultList);
// $('.listBox1_1  li').on('click',function(){
//     this.classList.add
// })

//储存
// window.sessionStorage.setItem('goodsId',target.dataset.id)
// //跳转
//    window.location.href = './commodity.html'
let listBox1_1 = document.querySelector('.listBox1-1')
listBox1_1.addEventListener('click',function(e){
    //兼容
    e = e || window.event
    let target = e.target || e.srcElement
    console.log(target);
    //判断li和butt
    if(target.nodeName === 'LI'){
        // console.log(11);

     //储存
        window.sessionStorage.setItem('id',target.dataset.productid)
     //跳转
        window.location.href = '../html/detail.html'
    }
})
